import { h, Component } from 'preact';
import s from './style';
import Modal from '~/components/Modal';
import classNames from 'classnames';
import {connect } from 'preact-redux';
class Rule extends Component {
	constructor() {
		super();
		this.state = {
			open: true
		};
	}
	onClose = () => {
		this.setState({
			open: false
		});
		setTimeout(this.onCloseRule,270);
	}
	onCloseRule = () => {
		const {dispatch} = this.props;
		dispatch({type:'closeRule'});
	}
	render() {
		const { isOpen } = this.props;
		const { open } = this.state;
		const style = {
			content: {
				width: '91%',
				overflow:'visible',
				border: '0.28125rem solid #fcbe69',
				'border-bottom': '0.28125rem solid #d29e57',
				right: 'auto'
			}
		};

		const modalProps = {
			isOpen,
			style,
			className:open ? s.wrap : s.close,
			contentLabel:''
		};


		const prizeName = 'cosmetic';
		return (
			<Modal { ...modalProps }>
				<div className={s.header}>
					<div className={s.close} onClick={this.onClose}><i className="icon-close-a" /></div>
					<div className={s.title}>活动规则</div>
				</div>
				<div className={s.body}>
					<ol className={s.ruleBox}>
						<li>本活动仅限已关注“汤臣倍健营养家”的粉丝参与。</li>
						<li>首次成功邀请好友获得<span className={s.red}>100</span>积分，之后每成功邀请1人奖励20积分。
								成功邀请是指，好友首次关注汤臣倍健营养家；</li>
						<li>好友只可被邀请一次，重复关注无效；</li>
						<li>每邀请5人，可获得1次抽奖机会，<span className={s.red}>100%</span>中奖；</li>
						<li>每月每人最多可获得5次抽奖的机会，每月最多可获得2000积分；</li>
						<li>现金红包中奖后24小时未领取，实物奖品中奖后15天内仍未提供收件信息，视为自动放弃；</li>
						<li>实物奖品将在15个工作日内安排发货，如有问题请联系客服热线<span className={s.red}>4000-916-916</span>；</li>
						<li>若发现作弊行为，汤臣倍健有权取消其奖励及中奖资格。</li>
					</ol>
				</div>
			</Modal>
		);
	}
}
export default connect()(Rule);
